<template>
    <div class="brokerageRuleList">
        <el-form :inline="true">
            <el-form-item label="城市：">
                <el-select v-model="params.cityId" placeholder="全部" filterable @change="loadDev">
                    <el-option v-for="item in citys"
                                :key="item.cityId"
                                :label="item.city"
                                :value="item.cityId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="楼盘名称：">
                <el-select v-model="params.estateId" placeholder="全部" filterable>
                    <el-option v-for="(item,j) in devs"
                                :key="item.devId+j"
                                :label="item.devName"
                                :value="item.devId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色：">
                <el-select v-model="params.roleId" placeholder="全部">
                    <el-option v-for="item in roles"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="规则状态：">
                <el-select v-model="params.ruleStatus" placeholder="全部">
                    <el-option v-for="item in status" :key="item.value" :label="item.label"
                                :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否超标：">
                <el-select v-model="params.isExceed" >
                    <el-option v-for="item in isExceeds" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态：">
                <el-select v-model="params.checkStatus" placeholder="全部" >
                    <el-option v-for="item in checkStatuss" :key="item.value" :label="item.label"
                                :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="节点规则：">
                <el-input v-model="params.nodeRuleName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="queryHandle()" id="monitorEnter">查询</el-button>
                <el-button type="primary" @click="fn('add',{})">新建规则</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border stripe>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column width="125"  prop="roleList" label="角色" :formatter="roleFn"></el-table-column>
            <el-table-column width="220" prop="estateNameList" label="楼盘名称" :show-overflow-tooltip="true" :formatter="devFn"></el-table-column>
            <el-table-column width="55" prop="formulaPackage" label="套餐">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="alert(scope.row)">{{scope.row.formulaPackage.length}}</el-button>
                </template>
            </el-table-column>
            <el-table-column width="220" prop="packageStarTime" label="规则有效期" :formatter="timeFn"></el-table-column>
            <el-table-column width="115" prop="ruleStatus" label="规则状态" :formatter="statusFn"></el-table-column>
            <el-table-column width="115" prop="userName" label="新建人"></el-table-column>
            <el-table-column width="220" prop="creatTime" label="新建时间"></el-table-column>
            <el-table-column width="85" prop="isExceed" label="是否超标" align="center">
                <template slot-scope="scope">
                    {{scope.row.isExceed==1?'是':'否'}}
                </template>
            </el-table-column>
            <el-table-column width="120" prop="checkStatus" label="审核状态" align="center" :formatter="initcheckStatus"></el-table-column>
            <!-- v2.10 -->
            <el-table-column width="95" prop="nextAuditorName" label="当前待办人" align="center"></el-table-column>
            <el-table-column width="95" prop="auditorName" label="审核人" align="center"></el-table-column>
            <el-table-column width="220" prop="auditTime" label="审核时间" align="center">
                <template slot-scope="scope">
                    <timeComp :timestamp="scope.row.auditTime"></timeComp>
                </template>
            </el-table-column>
            <el-table-column min-width="120" prop="nodeRuleName" label="关联节点规则" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column min-width="180" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="fn('view',scope.row)"
                    >查看</el-button>
                    <el-button size="small" type="text" @click="fn('del',scope.row)"
                               :disabled="!(scope.row.ruleStatus == 1 && scope.row.checkStatus==2)"
                    >删除</el-button>

                    <el-button size="small" type="text" @click="updateState('disable',scope.row)"
                               v-if="scope.row.status == 1 && scope.row.ruleStatus == 2
                                || scope.row.status == 1 && scope.row.ruleStatus == 1 && scope.row.checkStatus == 0
                                || scope.row.status == 1 && scope.row.ruleStatus == 1 && scope.row.checkStatus == 2"
                               :disabled="scope.row.status == 1 && scope.row.ruleStatus == 1"
                    >停用</el-button>
                    <el-button size="small" type="text" @click="updateState('enable',scope.row)"
                               v-if="
                               scope.row.status == 1 && scope.row.ruleStatus == 1&& scope.row.checkStatus == -1
                               ||scope.row.status == 1 && scope.row.ruleStatus == 1&& scope.row.checkStatus == 1
                                || scope.row.status == 1 && scope.row.ruleStatus == 3
                                || scope.row.status == 2 && scope.row.ruleStatus == 3"
                               :disabled="scope.row.status == 2 && scope.row.ruleStatus == 3"
                    >启用</el-button>

                    <el-dropdown size="small">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="fn('edit',scope.row)"
                                              :disabled="scope.row.ruleStatus == 2||(scope.row.ruleStatus == 1&&scope.row.checkStatus == 0)"
                            >编辑</el-dropdown-item>

                            <el-dropdown-item v-if="scope.row.status == 2 && scope.row.ruleStatus == 3"
                                              @click.native="updateState('recovery',scope.row)"
                            >恢复</el-dropdown-item>

                            <el-dropdown-item v-if="scope.row.status == 1 && scope.row.ruleStatus == 1
                             || scope.row.status == 1 && scope.row.ruleStatus == 2
                             || scope.row.status == 1 && scope.row.ruleStatus == 3"
                                              :disabled="!(scope.row.status == 1 && scope.row.ruleStatus == 3)"
                                              @click.native="updateState('revoke',scope.row)"
                            >撤销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                background
                :current-page="params.pageNum"
                :page-sizes="[10,20,30,40]"
                :page-size="params.pageSize"
                layout="total, sizes, prev, pager, next"
                @size-change="sizeChange"
                @current-change="currentChange"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :modal-append-to-body="false">
            <ul v-for="x in curTc" :key="x.id">
                <li>{{x.packageName}}</li>
                <li>{{x.packageExplain}}</li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import api from "@/api/apiPath"
import timeComp from "@/components/common/timeComp"

export default {
    name:"brokerageRuleList",
    title: '结佣规则管理',
    created() {
        if (this.$route.query.nodeName){
            this.params.nodeRuleName = this.$route.query.nodeName
        }
        this.loadCity();
        this.loadData();
    },
    mounted() {},
    activated(){
        if (this.$route.query.nodeName){
            this.params.nodeRuleName = this.$route.query.nodeName
        }
        this.loadCity();
        this.loadData();
    },
    components: {timeComp},
    data() {
        return {
            dialogVisible: false,
            citys: [],
            devs: [],
            roles: [
                {value: "", label: "全部"},
                {value: 0, label: "网络推客"},
                {value: 3, label: "职业经纪人"},
                {value: -1, label: "自来客"}
            ],
            status: [
                {value: "", label: "全部"},
                {value: 1, label: "未执行"},
                {value: 2, label: "执行中"},
                {value: 3, label: "执行结束"}
            ],
            isExceeds:[
                {value: "", label: "全部"},
                {value: 0, label: "否"},
                {value: 1, label: "是"}
            ],
            checkStatuss:[
                {value: "", label: "全部"},
                {value: 0, label: "待审核"},
                {value: 1, label: "审核通过"},
                {value: 2, label: "审核拒绝"}
            ],
            params: {
                cityId: '',
                estateId: '',
                roleId: '',
                ruleStatus: '',
                isExceed:"",
                checkStatus:"",
                nodeRuleName: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            total: 0,
            curTc: [],
        }
    },
    methods: {
        initcheckStatus(row, column, cellValue, index){//审核状态
            if(cellValue==0){
                return "审核中"
            }
            if(cellValue==1){
                return "审核通过"
            }
            if(cellValue==2){
                return "审核拒绝"
            }
        },
        roleFn(row,col,value) {
            let arr = [];
            value.forEach(it => {
                if(it == 3){
                    arr.push('职业经纪人');
                } else if(it == 0) {
                    arr.push('网络推客');
                } else if (it == -1) {
                    arr.push('自来客')
                }
            });
            return arr.join(',');
        },
        devFn(row,col,value) {
            if(value){
                return value.map(it => {
                    if(it.devId){
                        return `${it.cityName}--${it.devName}`
                    }else {
                        return '全部楼盘';
                    }
                }).join(',');
            }
        },
        statusFn(row,col,value) {
            return ['','未执行','执行中','执行结束'][value];
        },
        timeFn(row,col,value){
            return `${value} --- ${row.packageEndTime}`
        },
        alert({formulaPackage}){
            this.dialogVisible = true;
            this.curTc = formulaPackage;
        },
        loadCity() {
            this.axios.post(api.CITYLIST).then(res => {
                this.citys = res.data.data.cityList
            });
        },
        loadDev() {
            this.params.estateId = '';
            this.axios.post(api.ruleGetDevList,{cityId: this.params.cityId}).then(res => {
                this.devs = res.data.data;
            });
        },
        loadData() {
            this.axios.post(api.ruleList, this.params).then(res => {
                const {brokerage,count} = res.data.data;
                this.tableData = brokerage;
                this.total = count;
            });
        },
        fn(type,{id,status}) {
            if(type == 'add'){
                this.$router.push({path: '/operateBrokerageRule', query: {type: 'add'}})
            }else if(type == 'view'){
                this.$router.push({path: '/brokerageRuleDetail',query:{type:'view',id:id}})
            }else if(type == 'del'){
                this.axios.post(api.ruleDel, {id}).then(res => {
                    this.$alert('删除成功', '提示', {
                        confirmButtonText: '确定',
                        type: 'success',
                        callback: action => {
                            this.loadData();
                        }
                    });
                });
            }else {
                this.$router.push({path: '/brokerageRuleDetail',query:{type:'edit',id:id}})
            }
        },
        updateState(type,{id,packageStarTime,packageEndTime}){
            this.$axios.post('/commission/CMSetUpBro/updateOperationStatus', {id,operation: type,packageStarTime,packageEndTime}).then(res => {
                this.$alert('成功', '提示', {
                    confirmButtonText: '确定',
                    type: 'success',
                    callback: action => {
                        this.loadData();
                    }
                });
            });
        },
        //查询
        queryHandle() {
            this.params.pageNum = 1;
            if(this.params.nodeRuleName==''){
                location.href = location.href.split('=')[0]
            }
            this.loadData();
        },
        sizeChange(size) {
            this.params.pageSize = size;
            this.loadData();
        },
        currentChange(page) {
            this.params.pageNum = page;
            this.loadData();
        },

        panduan({packageEndTime}) {
            let today = this.getTimeString(new Date()),
            day = packageEndTime.split('-')[2];
            //在有效期内
            if(day == today.split('-')[2]){
                return true;
            }
            return packageEndTime > today;
        },
        getTimeString(timestamp) {
            if (timestamp) {
                const time = new Date(timestamp)
                const year = time.getFullYear()
                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                return year + '-' + month + '-' + day
            } else {
                return ''
            }
        },
    },
    computed: {}
}
</script>
<style lang="stylus">
    .brokerageRuleList {
        .el-table .cell{
            white-space: nowrap;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
            font-size: 12px;
        }
    }
</style>
